<template>
	<view class="floor-intro-page">
		<!-- 导航栏 -->
		<u-navbar title="医院楼层分布" bg-color="#3598db" title-color="#ffffff" left-icon-color="#ffffff"></u-navbar>

		<!-- 富文本内容容器 -->
		<view class="content-wrapper">
			<u-parse :html="floorContent"></u-parse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				floorContent: `
        <div class="floor-header">
          <img src="https://picsum.photos/750/250" alt="医院楼层导视图" style="width:100%;border-radius:10rpx;margin-bottom:30rpx;" />
          <h1 style="text-align:center;color:#3598db;font-size:40rpx;margin-bottom:20rpx;">赛博医馆楼层分布指南</h1>
          <p style="text-align:center;color:#666;font-size:28rpx;">本指南将为您介绍各楼层科室及服务分布</p>
        </div>

        <!-- 楼层导航 -->
        <div class="floor-navigation" style="display:flex;flex-wrap:wrap;justify-content:center;margin:30rpx 0;padding:15rpx;background:#f5f9ff;border-radius:8rpx;">
          <span class="floor-nav-item" style="display:inline-block;width:80rpx;height:80rpx;line-height:80rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin:0 10rpx;font-weight:bold;">1F</span>
          <span class="floor-nav-item" style="display:inline-block;width:80rpx;height:80rpx;line-height:80rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin:0 10rpx;font-weight:bold;">2F</span>
          <span class="floor-nav-item" style="display:inline-block;width:80rpx;height:80rpx;line-height:80rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin:0 10rpx;font-weight:bold;">3F</span>
          <span class="floor-nav-item" style="display:inline-block;width:80rpx;height:80rpx;line-height:80rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin:0 10rpx;font-weight:bold;">4F</span>
          <span class="floor-nav-item" style="display:inline-block;width:80rpx;height:80rpx;line-height:80rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin:0 10rpx;font-weight:bold;">5F</span>
          <span class="floor-nav-item" style="display:inline-block;width:80rpx;height:80rpx;line-height:80rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin:0 10rpx;font-weight:bold;">6F</span>
        </div>

        <!-- 1楼 -->
        <div class="floor-section" style="margin-bottom:40rpx;padding-bottom:20rpx;border-bottom:1px solid #eee;">
          <h2 style="color:#3598db;font-size:36rpx;margin:30rpx 0;display:flex;align-items:center;">
            <span style="display:inline-block;width:50rpx;height:50rpx;line-height:50rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin-right:15rpx;">1F</span>
            一楼 - 门诊大厅
          </h2>
          
          <div style="display:flex;margin-bottom:25rpx;">
            <img src="https://picsum.photos/300/200?1" alt="门诊大厅" style="width:40%;border-radius:8rpx;" />
            <div style="width:58%;margin-left:2%;">
              <ul style="padding-left:25rpx;">
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">大厅服务台</strong>：咨询引导、病历打印、便民服务</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">挂号收费处</strong>：窗口挂号、缴费、医保结算</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">药房</strong>：处方药取药、非处方药销售</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">急诊科</strong>：24小时急诊服务、抢救室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">输液室</strong>：静脉输液、肌肉注射</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 2楼 -->
        <div class="floor-section" style="margin-bottom:40rpx;padding-bottom:20rpx;border-bottom:1px solid #eee;">
          <h2 style="color:#3598db;font-size:36rpx;margin:30rpx 0;display:flex;align-items:center;">
            <span style="display:inline-block;width:50rpx;height:50rpx;line-height:50rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin-right:15rpx;">2F</span>
            二楼 - 内科诊区
          </h2>
          
          <div style="display:flex;margin-bottom:25rpx;">
            <img src="https://picsum.photos/300/200?2" alt="内科诊区" style="width:40%;border-radius:8rpx;" />
            <div style="width:58%;margin-left:2%;">
              <ul style="padding-left:25rpx;">
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">心血管内科</strong>：诊室1-4、心电图室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">消化内科</strong>：诊室5-7、胃镜室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">呼吸内科</strong>：诊室8-10、肺功能室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">内分泌科</strong>：诊室11-12、糖尿病教育室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">神经内科</strong>：诊室13-15、脑电图室</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 3楼 -->
        <div class="floor-section" style="margin-bottom:40rpx;padding-bottom:20rpx;border-bottom:1px solid #eee;">
          <h2 style="color:#3598db;font-size:36rpx;margin:30rpx 0;display:flex;align-items:center;">
            <span style="display:inline-block;width:50rpx;height:50rpx;line-height:50rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin-right:15rpx;">3F</span>
            三楼 - 外科诊区
          </h2>
          
          <div style="display:flex;margin-bottom:25rpx;">
            <img src="https://picsum.photos/300/200?3" alt="外科诊区" style="width:40%;border-radius:8rpx;" />
            <div style="width:58%;margin-left:2%;">
              <ul style="padding-left:25rpx;">
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">普通外科</strong>：诊室1-3</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">骨科</strong>：诊室4-6、康复理疗室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">神经外科</strong>：诊室7-8</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">胸外科</strong>：诊室9-10</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">泌尿外科</strong>：诊室11-12、碎石中心</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 4楼 -->
        <div class="floor-section" style="margin-bottom:40rpx;padding-bottom:20rpx;border-bottom:1px solid #eee;">
          <h2 style="color:#3598db;font-size:36rpx;margin:30rpx 0;display:flex;align-items:center;">
            <span style="display:inline-block;width:50rpx;height:50rpx;line-height:50rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin-right:15rpx;">4F</span>
            四楼 - 妇儿诊区
          </h2>
          
          <div style="display:flex;margin-bottom:25rpx;">
            <img src="https://picsum.photos/300/200?4" alt="妇儿诊区" style="width:40%;border-radius:8rpx;" />
            <div style="width:58%;margin-left:2%;">
              <ul style="padding-left:25rpx;">
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">妇产科</strong>：诊室1-5、产前检查室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">儿科</strong>：诊室6-9、儿童输液室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">新生儿科</strong>：诊室10、新生儿监护室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">儿科疫苗接种</strong>：接种室1-2</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 5楼 -->
        <div class="floor-section" style="margin-bottom:40rpx;padding-bottom:20rpx;border-bottom:1px solid #eee;">
          <h2 style="color:#3598db;font-size:36rpx;margin:30rpx 0;display:flex;align-items:center;">
            <span style="display:inline-block;width:50rpx;height:50rpx;line-height:50rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin-right:15rpx;">5F</span>
            五楼 - 医技科室
          </h2>
          
          <div style="display:flex;margin-bottom:25rpx;">
            <img src="https://picsum.photos/300/200?5" alt="医技科室" style="width:40%;border-radius:8rpx;" />
            <div style="width:58%;margin-left:2%;">
              <ul style="padding-left:25rpx;">
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">检验科</strong>：血液检验、生化检验</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">影像科</strong>：X光室、CT室、核磁共振室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">超声科</strong>：B超室1-4、彩超室</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">病理科</strong>：病理检查、活检</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">内窥镜中心</strong>：肠镜、喉镜检查</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 6楼 -->
        <div class="floor-section" style="margin-bottom:40rpx;">
          <h2 style="color:#3598db;font-size:36rpx;margin:30rpx 0;display:flex;align-items:center;">
            <span style="display:inline-block;width:50rpx;height:50rpx;line-height:50rpx;text-align:center;background:#3598db;color:white;border-radius:50%;margin-right:15rpx;">6F</span>
            六楼 - 住院部
          </h2>
          
          <div style="display:flex;margin-bottom:25rpx;">
            <img src="https://picsum.photos/300/200?6" alt="住院部" style="width:40%;border-radius:8rpx;" />
            <div style="width:58%;margin-left:2%;">
              <ul style="padding-left:25rpx;">
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">内科病房</strong>：601-610病房</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">外科病房</strong>：611-620病房</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">妇产科病房</strong>：621-630病房</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">护士站</strong>：楼层中部，24小时值班</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">医生办公室</strong>：631房间</li>
                <li style="margin-bottom:12rpx;line-height:1.6;color:#555;"><strong style="color:#333;">活动室</strong>：供住院患者休闲使用</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 楼层提示 -->
        <div style="background:#fff8e1;padding:20rpx;border-radius:8rpx;margin-top:50rpx;">
          <h3 style="color:#e6a23c;font-size:30rpx;margin-bottom:15rpx;">温馨提示</h3>
          <p style="line-height:1.7;color:#666;margin-bottom:10rpx;">1. 各楼层均设有卫生间、饮水处和休息区</p>
          <p style="line-height:1.7;color:#666;margin-bottom:10rpx;">2. 电梯位于门诊大厅两侧，扶梯位于大厅中央</p>
          <p style="line-height:1.7;color:#666;margin-bottom:10rpx;">3. 如有疑问可咨询各楼层导诊台或拨打服务热线：400-888-9999</p>
        </div>
      `
			};
		}
	};
</script>

<style lang="scss" scoped>
	.floor-intro-page {
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.content-wrapper {
		padding: 25rpx;
	}

	// 解决富文本样式穿透问题
	::v-deep .u-parse {

		h1,
		h2,
		h3 {
			font-weight: bold;
		}

		ul {
			list-style-type: disc;
		}

		img {
			display: block;
			height: auto;
		}

		.floor-nav-item {
			transition: all 0.3s ease;
		}

		.floor-nav-item:active {
			opacity: 0.8;
			transform: scale(0.95);
		}
	}
</style>